<h1>Import / Export</h1>

<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-md-12 clr-col-12" appRole appFeature="streams">
    <app-view-card titleModal="Streams" keyContext="import-export" name="import-export" id="streams">
      <ng-template>
        <div>
          <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
          <a href="/#" (click)="run('export-stream')">Export stream(s): Create a JSON file with the selected streams</a>
        </div>
        <div [appRole]="['ROLE_CREATE']">
          <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
          <a href="/#" (click)="run('import-stream')">Import stream(s): Import streams from a JSON file</a>
        </div>
      </ng-template>
    </app-view-card>
  </div>
  <div class="clr-col-lg-6 clr-col-md-12 clr-col-12" appRole appFeature="tasks">
    <app-view-card titleModal="Tasks" keyContext="import-export" name="import-export" id="tasks">
      <ng-template>
        <div>
          <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
          <a href="/#" (click)="run('export-task')">Export task(s): Create a JSON file with the selected tasks</a>
        </div>
        <div [appRole]="['ROLE_CREATE']">
          <clr-icon shape="angle" style="transform: rotate(90deg)"></clr-icon>
          <a href="/#" (click)="run('import-task')">Import task(s): Import tasks from a JSON file</a>
        </div>
      </ng-template>
    </app-view-card>
  </div>
</div>

<app-manage-stream-import #streamImportModal></app-manage-stream-import>
<app-manage-stream-export #streamExportModal></app-manage-stream-export>

<app-manage-task-export #taskExportModal></app-manage-task-export>
<app-manage-task-import #taskImportModal></app-manage-task-import>
